<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器复习网页</title>
		<link rel="stylesheet" href="" />
		<style type="text/css">
			#id01,
			.cl1 {
				background-color: #FFA500;
				font-size: 15px;
				color: bisque;
				padding: 3px;
				margin: 10px;

				border: 1px solid crimson;
				height: 50px;
				width: 30%;
			}

			td {
				font-size: 20px;
				font-family: "幼圆";
			}

			input[type='date'] {
				height: 30px;
				width: 175px;
				font-family: "宋体";
				font-size: 20px;
			}

			input[type='text'] {
				height: 40px;
				width: 400px;
				padding: 10px;
				font-size: 18px;
				font-family: "幼圆";
			}

			input[type='submit'],
			input[type='reset'] {
				height: 50px;
				width: 80px;
				color: #F0F8FF;
				font-size: 20px;
				font-family: "幼圆";
				border: 0px;
			}

			input[type='submit'] {
				background-color: #4169E1;
			}

			input[type='reset'] {
				background-color: #DDA0DD;
			}
			
			
			.button1{
				width: 80px;
				height: 50px;
				color: white;
				font-size: 20px;
				font-family: "幼圆";
				border: 0px;
			}
			#select1{
				width: 100px;
				height: 25px;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<!-- html中id是唯一标识 不同标签 id也不要相同-->
		<div class="cl1">class设置</div>
		<div id="id01">id设置</div>
		<div style="background-color: #4169E1;color: #F0F8FF;">行内style css</div>

		<div>
			<form>
				<table>
					<tr>
						<td>
							<h1 style="font-family: '宋体';">学生信息管理系统MIS</h1>
						</td>
					</tr>
					<tr>
						<td>姓名：</td>
					</tr>
					<tr>
						<td>
							<input type="text" name="user" placeholder="请输入用户名..." />
						</td>
					</tr>
					<tr>
						<td>年龄：</td>
					</tr>
					<tr>
						<td>
							<input type="text" name="age" placeholder="请输入年龄..." />
						</td>
					</tr>
					<tr>
						<td>
							性别：（单选框）
							<input type="radio" name="sex" value="1" checked="checked" />男
							<input type="radio" name="sex" value="2" />女
						</td>
					</tr>
					<tr>
						<td>
							爱好：（多选）
							<input type="checkbox" name="like" value="1" checked="checked" />乒乓球
							<input type="checkbox" name="like" value="2" />爬山
							<input type="checkbox" name="like" value="3" />唱歌
						</td>
					</tr>
					<tr>
						<td>
							学历：（下拉框）
							<select name="graduate" style="font-size: 18px;">
								<option value="1">初中及以下</option>
								<option value="2">高中</option>
								<option value="3" selected="selected">本科</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>入学日期：</td>
					</tr>
					<tr>
						<td>
							<input type="date" name="date" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="submit" name="提交1" value="保存" />
							<input type="reset" name="重置1" value="取消" />
						</td>
					</tr>
				</table>

			</form>
		</div>

		<div>
			<form>
				<table>
					<tr>
						<td>姓名：</td>
					</tr>
					<tr>
						<td>
							<input type="text" name="user" placeholder="请输入姓名..." />
						</td>
					</tr>
					<tr>
						<td>年龄：</td>
					</tr>
					<tr>
						<td>
							<input type="text" name="age" placeholder="请输入年龄..." />
						</td>
					</tr>
					<tr>
						<td>
							性别
							<input type="radio" name="sex" value="1" checked="checked" />男
							<input type="radio" name="sex" value="2" />女
						</td>
					</tr>
					<tr>
						<td>
							爱好
							<input type="checkbox" name="like" value="1" checked="checked" />乒乓球
							<input type="checkbox" name="like" value="2" />爬山
							<input type="checkbox" name="like" value="3" />唱歌
						</td>
					</tr>
					<tr>
						<td>
							学历
							<select name="graduate" id="select1">
								<option value="1">初中及以下</option>
								<option value="2" selected="selected">高中</option>
								<option value="3">大学</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>入学日期</td>
					</tr>
					<tr>
						<td>
							<input type="date" name="date" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="submit" name="提交" value="保存" class="button1"/>
							<input type="reset" name="重置" value="取消" class="button1"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>
